<template>
  <div class="loginForm">
    <p class="title">
      {{ title }}
    </p>
    <el-form
      ref="loginFormRef"
      :model="loginForm"
      :rules="rules"
      label-position="left"
    >
      <el-form-item label="" prop="username">
        <div class="username">
          <el-input
            v-model="loginForm.username"
            :prefix-icon="resolveComponent('UserFilled')"
            placeholder="账号"
            size="default"
          />
        </div>
      </el-form-item>
      <el-form-item label="" prop="password">
        <div class="password">
          <el-input
            v-model="loginForm.password"
            :prefix-icon="resolveComponent('Lock')"
            placeholder="密码"
            show-password
            size="default"
            type="password"
            @keyup.enter="handleLogin(loginFormRef)"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <div class="login_btn" @click="handleLogin(loginFormRef)">
          <el-icon v-show="isLoading" class="is-loading">
            <Loading />
          </el-icon>
          登录
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, resolveComponent } from 'vue'
import { ElForm, ElMessage } from 'element-plus'
import setting from '@/setting'
import { validateUsername } from '@/utils/validate'
// import { UserFilled, Lock } from '@element-plus/icons-vue'
import piniaStore from '@/store'
import { useRouter } from 'vue-router'
import type { IElForm, IElFormRule } from '@/types/element-plus'

const router = useRouter()

const title = setting.title

const rules = reactive<IElFormRule>({
  username: [{ required: true, trigger: 'blur', validator: validateUsername }],
  password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
})
const loginForm = reactive({
  username: '',
  password: '',
})

const isLoading = ref(false)
const loginFormRef = ref<IElForm>()
const handleLogin = (formEl: IElForm | undefined) => {
  if (!formEl) return
  isLoading.value = true
  formEl.validate(async (valid: any) => {
    if (valid) {
      piniaStore.userStore
        .handleLogin(loginForm)
        .then(() => {
          router.push({ path: '/' })
          isLoading.value = false
        })
        .catch((err) => {
          ElMessage.error(err.error_description)
          isLoading.value = false
        })
    } else {
      isLoading.value = false
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
.loginForm {
  width: 563px;
  height: 100%;
  flex-shrink: 0;
  background: #fff;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 105px 79px;
  .title {
    font-size: 48px;
    font-weight: 400;
    color: #333;
    line-height: 120px;
    text-align: center;
  }
  .el-form {
    margin-top: 92px;
    .el-form-item {
      margin-bottom: 70px;
    }
    .username {
      width: 100%;
      height: 64px;
      font-size: 20px;
      color: #999999;
      line-height: 64px;
      border-bottom: 1px solid #e0e0e0;
    }
    .password {
      width: 100%;
      height: 64px;
      font-size: 20px;
      color: #999999;
      line-height: 64px;
      border-bottom: 1px solid #e0e0e0;
    }
    :deep(.el-input__wrapper) {
      height: 50px;
      // border: none;
      font-size: 18px;
      box-shadow: none;
    }
    .login_btn {
      width: 350px;
      height: 60px;
      background: #ff7e00;
      border-radius: 4px;
      box-shadow: 4px 18px 26px 0 rgba(15, 53, 80, 0.26);
      font-size: 22px;
      color: #ffffff;
      margin: 120px auto 0 auto;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      &:hover {
        opacity: 0.9;
      }
    }
  }
}
</style>
